import { Box, Typography } from '@mui/material';
import { useRouter } from 'next/router';

import { GetPayoutsTodayResponse } from '../../api/payroll-group/payroll-group-manager';
import Routes from '../../constants/routes';
import NumberTool from '../../libs/number-tool';
import { GFSButton } from '../shared/button/gfs-button';

interface Props {
    payout: GetPayoutsTodayResponse;
}

export default function UpcomingDisbursementCard(props: Props) {
    const { payrollGroup, totalAmount } = props.payout;
    const router = useRouter();

    const onDisburseClick = () => {
        router.push(`${Routes.AXIE_DISBURSEMENT}${payrollGroup.id}`);
    };

    return (
        <Box
            className="d-flex justify-content-center align-items-center flex-column"
            sx={{
                width: 240,
                p: 2,
                background: '#0B0821',
                borderRadius: '12px'
            }}
        >
            <Box
                component="img"
                sx={{
                    height: 80,
                    width: 80,
                    mb: 2
                }}
                alt="Icon"
                src={'/group.png'}
            />
            <Typography variant="h4" className="mb-1">
                {payrollGroup.name}
            </Typography>
            <Typography
                variant="subtitle1"
                className="mb-2"
                sx={{ fontSize: '16px', color: '#FFBB59' }}
            >
                {payrollGroup.numberOfMembers}{' '}
                {payrollGroup.numberOfMembers == 1 ? 'Scholar' : 'Scholars'}
            </Typography>
            <Box
                className="d-flex justify-content-between align-items-center mb-3"
                sx={{ minWidth: 166 }}
            >
                <Typography variant="subtitle1">Amount:</Typography>
                <Typography variant="subtitle1">
                    {NumberTool.format(totalAmount, payrollGroup.currency, 2)}{' '}
                    {payrollGroup.currency}
                </Typography>
            </Box>
            <GFSButton
                sx={{ minWidth: 166, mb: 3 }}
                disabled={payrollGroup.numberOfMembers == 0 || totalAmount == 0}
                onClick={onDisburseClick}
            >
                Disburse
            </GFSButton>
            {/* <Typography variant="subtitle1">Next Payout: 05/30/2022</Typography> */}
        </Box>
    );
}
